<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-02-07 09:24:31
 * @LastEditTime: 2022-06-30 15:28:44
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="settlement">
    <tables-layout :isHaveBtn="true">
      <template #tab_layout>
        <div class="tab_nav">
          <el-tabs v-model.trim="curType">
            <el-tab-pane :label="item.name" :name="item.value" v-for="item in partTypeList" :key="item.name">
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #btn_layout>
        <el-button icon="iconfont icon-jiufuqianbaoicon06" size="mini" class="exportBtn add" @click="add">
          发起结算单
        </el-button>
      </template>
      <template #table_layout>
        <div class="search-con">
          <el-select v-model="contractId" filterable placeholder="请选择" size="small" @change="contractChange">
            <el-option v-for="item in conOptions" :key="item.value" :label="item.numberAndName" :value="item.id">
            </el-option>
          </el-select>
          <el-tooltip effect="light" :content="contractContent" placement="top">
            <div class="exhibit text_hidde">{{ contractContent || '--' }}</div>
          </el-tooltip>

          <div style="margin-left: 20px; width: 150px" class="text_hidde">创建人：{{ createBy || '--' }}</div>
        </div>
        <div class="search-con">
          <label style="margin-right: 30px">合同形式：{{ contractForm }}</label>
          <label style="margin-right: 30px">合同保证金：{{ margin }}/{{ margin }}万元</label>
          <label>结算进度：{{ acceptedAmount }}/{{ contractAmount }}万元</label>
          <el-progress
            :percentage="percentage"
            color="#30C776"
            :stroke-width="6"
            style="width: 150px; margin-left: 20px"
            :format="progressFormat"
          ></el-progress>
        </div>
        <all-settlement
          :contractId="contractId"
          v-if="curType == '0'"
          ref="table"
          @select="selectChange"
        ></all-settlement>
        <invalid-statement :contractId="contractId" v-if="curType == '1'" ref="table"></invalid-statement>
        <billing-statement :contractId="contractId" v-if="curType == '2'" ref="table"> </billing-statement>
        <payment-statement
          :contractId="contractId"
          v-if="curType == '3'"
          ref="table"
          @select="selectChange"
        ></payment-statement>
        <invoice-completed :contractId="contractId" v-if="curType == '4'" ref="table"></invoice-completed>
      </template>
    </tables-layout>
    <el-dialog
      width="1200px"
      :center="true"
      append-to-body
      title="添加结算单"
      v-if="settlementVisiable"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="settlementVisiable"
    >
      <add-order-settlement @close="close"></add-order-settlement>
    </el-dialog>
  </div>
</template>

<script>
import AddOrderSettlement from './AddOrderSettlementModify/index.vue'
import TablesLayout from '../TablesLayout.vue'
import AllSettlement from './tables/allSettlement.vue'
import InvalidStatement from './tables/InvalidStatement.vue'
import BillingStatement from './tables/BillingStatement.vue'
import PaymentStatement from './tables/PaymentStatement.vue'
import InvoiceCompleted from './tables/InvoiceCompleted.vue'
export default {
  components: {
    TablesLayout,
    AllSettlement,
    AddOrderSettlement,
    InvalidStatement,
    BillingStatement,
    PaymentStatement,
    InvoiceCompleted
  },
  data() {
    return {
      contractForm: '',
      settlementVisiable: false,
      contractId: '',
      conOptions: [],
      curType: '0',
      settlementId: null,
      partTypeList: [
        {
          value: '0',
          name: '所有结算单'
        },
        {
          value: '1',
          name: '未生效'
        },
        {
          value: '2',
          name: '待开票'
        },
        {
          value: '3',
          name: '待付款'
        },
        {
          value: '4',
          name: '已完成'
        }
      ],
      percentage: 0,
      percentageTo: 0,
      contractContent: '',
      margin: '',
      acceptedAmount: null,
      contractAmount: null,
      createBy: ''
    }
  },
  created() {
    this.getSelectOption()
  },
  beforeMount() {},
  mounted() {},
  methods: {
    selectChange(val) {
      this.getSelectOption(val)
    },
    progressFormat(val) {
      if (this.percentageTo > 100) {
        return `${this.percentageTo}%`
      } else {
        return `${val}%`
      }
    },
    add() {
      this.settlementVisiable = true
    },
    contractChange(id) {
      this.conOptions.forEach(item => {
        if (id == item.id) {
          this.createBy = item.createBy
          this.contractContent = item.biddingContent
          let obj = {
            1: '固定总价',
            2: '固定单价',
            3: '可调总价',
            4: '可调单价',
            5: '用户自定义'
          }
          this.contractForm = obj[item.contractForm] || '--'
          this.margin = item.margin

          this.acceptedAmount = item.acceptedAmount || 0
          this.contractAmount = item.contractAmount
          this.percentage = Math.round((this.acceptedAmount / this.contractAmount) * 100)
          if (this.percentage > 100) {
            this.percentage = 100
          }
          this.percentageTo = Math.round((this.acceptedAmount / this.contractAmount) * 100)
          obj = null
        }
      })
    },
    close(val) {
      if (val) {
        this.$refs.table.getData()
      }
      this.settlementVisiable = false
    },
    closeDialog(done) {
      done()
    },
    // 获取合同下拉
    getSelectOption(id) {
      this.$https({
        method: 'post',
        url: '/contract/queryContractProNameListBySett'
      })
        .then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              this.conOptions = res.data
              if (id) {
                this.contractId = id
                this.conOptions.forEach(item => {
                  if (id == item.id) {
                    this.createBy = item.createBy
                    this.contractContent = item.biddingContent
                    let obj = {
                      1: '固定总价',
                      2: '固定单价',
                      3: '可调总价',
                      4: '可调单价',
                      5: '用户自定义'
                    }
                    this.contractForm = obj[item.contractForm] || '--'
                    this.margin = item.margin

                    this.acceptedAmount = item.acceptedAmount || 0
                    this.contractAmount = item.contractAmount
                    this.percentage = Math.round((this.acceptedAmount / this.contractAmount) * 100)
                    if (this.percentage > 100) {
                      this.percentage = 100
                    }
                    this.percentageTo = Math.round((this.acceptedAmount / this.contractAmount) * 100)
                    obj = null
                  }
                })
              } else {
                this.contractId = this.conOptions[0].id
                this.createBy = this.conOptions[0].createBy
                this.contractContent = this.conOptions[0].biddingContent
                let obj = {
                  1: '固定总价',
                  2: '固定单价',
                  3: '可调总价',
                  4: '可调单价',
                  5: '用户自定义'
                }
                this.contractForm = obj[this.conOptions[0].contractForm] || '--'
                this.margin = this.conOptions[0].margin

                this.acceptedAmount = this.conOptions[0].acceptedAmount || 0
                this.contractAmount = this.conOptions[0].contractAmount
                this.percentage = Math.round((this.acceptedAmount / this.contractAmount) * 100)
                if (this.percentage > 100) {
                  this.percentage = 100
                }
                this.percentageTo = Math.round((this.acceptedAmount / this.contractAmount) * 100)
                obj = null
              }
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
#settlement {
  height: 100%;
  .search-con {
    color: #333;
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    font-size: 14px;
    font-weight: 400px;
    /deep/.el-select {
      width: 500px;
    }
  }
  .exhibit {
    font-weight: 500;
    margin-left: 20px;
    padding-right: 20px;
    border-right: 1px solid #999;
    max-width: 210px;
  }
  .tab_nav {
    /deep/ .el-tabs__nav-wrap::after {
      height: 0;
    }
    /deep/ .el-tabs__item {
      height: 60px;
      line-height: 60px;
    }
    /deep/ .el-tabs__header {
      margin: 0;
    }
  }
}
</style>
